<template>
  <m-card :title="title" :icon="icon">
    <div class="nav ">
      <div class="nav-item d-flex pt-3 jc-between">
        <div class="item-link" :class="{active: active === i}"
        @click="$refs.list.swiper.slideTo(i)"
        v-for="(category,i) in categories" :key="i"> {{category.name}} </div>
      </div>
    </div>
    <swiper ref="list" :options="{autoHeight:true}"  @slide-change="() => active=$refs.list.swiper.realIndex">
      <swiperslide v-for="(category,i) in categories" :key="i">
        <!-- <div v-for="(item,i) in category.newsList" :key="i" class="py-2 fs-xl pt-2 d-flex ai-center">
        <div style="width:14%;"> {{item.categoryName}} </div> 
          <div style="width:1%;">|</div>
          <div
            style="width:70%;margin-left:5%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"
          > {{item.title}} </div>
          <div style="width:20%;"> {{item.date}} </div> 
        </div> -->
        <slot name="item" :category="category"></slot>
      </swiperslide>
    </swiper>
  </m-card>
</template>

<script>
import "swiper/dist/css/swiper.css";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
    props:{
            title: {type:String,require:true},
        icon: {type:String,require:true},
        categories:{type: Array,require:true}
    },
  data() {
    return {
        active: 0,
    };
  },
  components: {
    swiper: swiper,
    swiperslide: swiperSlide
  }
};
</script>

